<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简易版计算器布局及样式参考</title> 
    <style type="text/css">
        #sDiv {               /*简易版计算器布局及样式参考*/
            text-align: center;
            border: solid 1px;
            width: 200px;
            border-radius: 15px;
            background-color: lavenderblush;
        }
         
        #t {
            border: solid 1px;
            width: 150px;
            border-radius: 15px;
            margin: 10px 0;
            font-size: 20px;
            padding: 0 3px;
			text-align: right;
        } 
        input[type=button] {
            border-radius: 15px;
            width: 30px;
            height: 30px;
            margin: 2px;
            font-size: 20px;
        } 
        #equ {
            width: 150px;
            font-size: 26px;
            padding-bottom: 30px;
        }
     </style>
        </head>   
    <body>
        <div id="sDiv">
 
            <input type="text" name="t" id="t" value="" /><br/>
            <input type="button" name="" id="" value="1" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="2" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="3" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="4" onclick="calCulate(this.value)" /><br />
            <input type="button" name="" id="" value="5" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="6" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="7" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="8" onclick="calCulate(this.value)" /><br />
            <input type="button" name="" id="" value="9" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="0" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="." onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="C" onclick="calCulate(this.value)" /><br/>
            <input type="button" name="" id="" value="+" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="-" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="*" onclick="calCulate(this.value)" />
            <input type="button" name="" id="" value="/" onclick="calCulate(this.value)" /><br/>
            <input type="button" name="" id="equ" value="=" onclick="e(this.value)" />
        </div>
		
		<script>
		            input = document.getElementById('t');
		 
		            function s(v) {
		                input.value = v
		            }
		 
		            function calCulate(v) {
		                input.value += v
		            }
		 
		            function e() {
		                try {
		                    s(eval(input.value))
		                } catch (e) {
		                    s('Error')
		                }
		            }
		 
		 
		            function operator(type) {
		                switch (type) {
		                    case "backspace":
		                        var str = input.value;
		                        //str = (str != "0") ? str : "";
		                        str = str.substr(0, str.length - 1);
		                        str = (str != "") ? str : "0";
		                        input.value = str;
		                        break;
		                    case "opposite":
		                        input.value = -input.value;
		                        break;
		                    case "percent":
		                        input.value = input.value / 100;
		                        break;
		                    case "pow":
		                        input.value = Math.pow(input.value, 2);
		                        break;
		                    case "sqrt":
		                        input.value = Math.sqrt(input.value);
		                        break;
		                }
		            }
		        </script>
    </body>
 
</html>